<template>
    <div class="navigation">
			<router-link to="/Home">首页</router-link>
			<router-link to="/NewBooks">新书</router-link>
			<router-link to="/No1">特价书</router-link>
			<router-link to="/No2">教材书</router-link>
			<router-link to="/No3">视听教程</router-link>
    </div>
</template>

<script>
export default {
    name: 'Navigation',
}
</script>

<style scoped>
div.navigation{ 
	width: 100%;
	overflow: hidden;
}

.navigation a:hover{
    color: black;
    background: white;
	cursor: pointer;
}

.navigation a {
	text-align: center;
	display: block;
	box-sizing: border-box;
	float: left;
	width: 20%;
	background-color: rgb(40, 84, 131);
	color: white;
	height: 2.8rem;
	line-height: 2.8rem;
	text-decoration: none;
	border-left: #000000 solid 1px
	}
</style>